<!--
 * @Author: rooterShip
 * @Date: 2024-09-04 14:23:12
 * @LastEditors: rooterShip
 * @LastEditTime: 2025-05-20 11:54:28
-->
<!--<template>-->
<!--  <div-->
<!--      style="-->
<!--      height: 50px;-->
<!--      line-height: 50px;-->
<!--      border-bottom: 1px solid #ccc;-->
<!--      display: flex;-->
<!--      background-color: #0066cc;-->
<!--      color: white;-->
<!--    "-->
<!--  >-->
<!--    <img-->
<!--        src="..\..\public\5c752269e407d.png"-->
<!--        alt="图标"-->
<!--        style="width: 75px; height: 50px; margin-left: 30px; margin-right: 10px"-->
<!--    />-->
<!--    <div-->
<!--        style="-->
<!--        width: 200px;-->
<!--        margin-left: 10px;-->
<!--        font-size: x-large;-->
<!--        font-weight: bold;-->
<!--      "-->
<!--    >-->
<!--      <span>海法 </span>-->
<!--      <span style="margin-left: auto; margin-right: auto">·</span>-->
<!--      <span> 斥候</span>-->
<!--    </div>-->
<!--    <div style="flex: 1"></div>-->
<!--    <div-->
<!--        style="-->
<!--        width: 110px;-->
<!--        margin-top: 8px;-->
<!--        margin-right: 25px;-->
<!--        background-color: #0066cc;-->
<!--        color: white;-->
<!--      "-->
<!--    >-->
<!--      &lt;!&ndash;      <el-dropdown>&ndash;&gt;-->
<!--      &lt;!&ndash;        <el-button type="primary">&ndash;&gt;-->
<!--      &lt;!&ndash;          管理员&ndash;&gt;-->
<!--      &lt;!&ndash;          <el-icon class="el-icon&#45;&#45;right">&ndash;&gt;-->
<!--      &lt;!&ndash;            <arrow-down/>&ndash;&gt;-->
<!--      &lt;!&ndash;          </el-icon>&ndash;&gt;-->
<!--      &lt;!&ndash;        </el-button>&ndash;&gt;-->
<!--      &lt;!&ndash;        <template #dropdown>&ndash;&gt;-->
<!--      &lt;!&ndash;          <el-dropdown-menu>&ndash;&gt;-->
<!--      &lt;!&ndash;            <el-dropdown-item>个人信息</el-dropdown-item>&ndash;&gt;-->
<!--      &lt;!&ndash;            <el-dropdown-item>退出系统</el-dropdown-item>&ndash;&gt;-->
<!--      &lt;!&ndash;          </el-dropdown-menu>&ndash;&gt;-->
<!--      &lt;!&ndash;        </template>&ndash;&gt;-->
<!--      &lt;!&ndash;      </el-dropdown>&ndash;&gt;-->
<!--      <el-dropdown>-->
<!--        <el-button type="primary">-->
<!--          {{ getUserRoleDisplay() }}-->
<!--          <el-icon class="el-icon&#45;&#45;right">-->
<!--            <arrow-down/>-->
<!--          </el-icon>-->
<!--        </el-button>-->
<!--        <template #dropdown>-->
<!--          <el-dropdown-menu>-->
<!--            <el-dropdown-item @click="showUserInfo">个人信息</el-dropdown-item>-->
<!--            <el-dropdown-item @click="showUpdatePasswordDialog">修改密码</el-dropdown-item>-->
<!--            <el-dropdown-item @click="logout">退出系统</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--        </template>-->
<!--      </el-dropdown>-->
<!--    </div>-->
<!--  </div>-->
<!--  &lt;!&ndash; 修改密码对话框 &ndash;&gt;-->
<!--  <el-dialog-->
<!--      title="修改密码"-->
<!--      v-model="passwordDialogVisible"-->
<!--      width="30%">-->
<!--    <el-form :model="passwordForm" :rules="passwordFormRules" ref="passwordFormRef">-->
<!--      <el-form-item label="新密码" prop="newPassword">-->
<!--        <el-input v-model="passwordForm.newPassword" type="password" autocomplete="off" placeholder="请输入新密码" show-password></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="确认新密码" prop="confirmPassword">-->
<!--        <el-input v-model="passwordForm.confirmPassword" type="password" autocomplete="off" placeholder="请再次输入新密码" show-password></el-input>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--    <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button @click="passwordDialogVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="updatePassword">确定</el-button>-->
<!--      </span>-->
<!--    </template>-->
<!--  </el-dialog>-->
<!--</template>-->
<template>
  <div      style="
        height: 60px;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
        display: flex;
        background-color: #a0d8ff; /* 浅蓝色 */
        color: white;
      "
  >
    <img
        src="..\..\public\5c752269e407d.png"
        alt="图标"        style="width: 75px; height: 50px; margin-left: 30px; margin-right: 10px; margin-top: 5px"
    />
    <div        style="
          width: 200px;
          margin-left: 10px;
          margin-top: 5px;
          font-size: x-large;
          font-weight: bold;
        "
    >
      <span>海法 </span>
      <span style="margin-left: auto; margin-right: auto">·</span>
      <span> 斥候</span>
    </div>
    <div style="flex: 1"></div>
    <div        style="
          width: 110px;
          margin-top: 15px;
          margin-right: 25px;
          background-color: #a0d8ff; /* 同步背景色 */
          color: white;
        "
    >
      <el-dropdown>
        <el-button type="primary">
          {{ getUserRoleDisplay() }}
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="showUserInfo">个人信息</el-dropdown-item>
            <el-dropdown-item @click="showUpdatePasswordDialog">修改密码</el-dropdown-item>
            <el-dropdown-item @click="logout">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  <!-- 修改密码对话框 -->
  <el-dialog
      title="修改密码"
      v-model="passwordDialogVisible"
      width="30%">
    <el-form :model="passwordForm" :rules="passwordFormRules" ref="passwordFormRef">
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="passwordForm.newPassword" type="password" autocomplete="off" placeholder="请输入新密码" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="confirmPassword">
        <el-input v-model="passwordForm.confirmPassword" type="password" autocomplete="off" placeholder="请再次输入新密码" show-password></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="passwordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updatePassword">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style scoped>
</style>

<script>
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
} from "@element-plus/icons";
import {ArrowDown} from "@element-plus/icons";
import {useRouter} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "Header",
  components: {
    Location,
    Document,
    Setting,
    IconMenu,
    ArrowDown,
  },
  setup() {
    const router = useRouter();
    const currentUser = ref({
      username: '管理员',
      role: 'ADMIN' // 添加默认角色
    });

    // 表单引用
    const passwordFormRef = ref(null);

    // 修改密码对话框相关
    const passwordDialogVisible = ref(false);
    const passwordForm = reactive({
      newPassword: '',
      confirmPassword: ''
    });

    const passwordFormRules = {
      newPassword: [
        {required: true, message: '请输入新密码', trigger: 'blur'},
        {min: 6, message: '密码长度至少6位', trigger: 'blur'}
      ],
      confirmPassword: [
        {required: true, message: '请确认新密码', trigger: 'blur'},
        {
          validator: (rule, value, callback) => {
            if (value !== passwordForm.newPassword) {
              callback(new Error('两次输入的密码不一致'));
            } else {
              callback();
            }
          },
          trigger: 'blur'
        }
      ]
    };

    // 显示修改密码对话框
    const showUpdatePasswordDialog = () => {
      // 重置表单
      passwordForm.newPassword = '';
      passwordForm.confirmPassword = '';
      passwordDialogVisible.value = true;
    };

    // 更新密码
    const updatePassword = async () => {
      // 先进行表单验证
      passwordFormRef.value.validate(async (valid) => {
        if (valid) {
          try {
            const userUpdate = {
              id: currentUser.value.id,
              password: passwordForm.newPassword
            };

            const response = await request.post('/user/updateSelf', userUpdate);
            if (response.code === 200) {
              ElMessage.success('密码修改成功');
              passwordDialogVisible.value = false;
            } else {
              ElMessage.error(response.message);
            }
          } catch (error) {
            console.error('修改密码失败:', error);
            ElMessage.error('修改密码失败');
          }
        } else {
          // 表单验证失败，不执行提交操作
          return false;
        }
      });
    };


    // 获取当前用户信息
    const getCurrentUser = async () => {
      try {
        const response = await request.get('/user/info');
        if (response.code === 200) {
          currentUser.value = response.data;
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    };

    // 根据角色显示用户类型
    const getUserRoleDisplay = () => {
      if (currentUser.value.role === 'ADMIN') {
        return '管理员';
      } else {
        return currentUser.value.username;
      }
    };

    // 退出系统
    const logout = () => {
      ElMessageBox.confirm('确定要退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        try {
          const response = await request.post('/user/logout');
          if (response.code === 200) {
            ElMessage.success('退出成功');
            // 跳转到登录页面
            await router.push('/');
          } else {
            ElMessage.error('退出失败: ' + response.message);
          }
        } catch (error) {
          console.error('退出请求失败:', error);
          ElMessage.error('退出请求失败');
          // 即使请求失败，也跳转到登录页面
          await router.push('/');
        }
      }).catch(() => {
        // 用户取消退出
      });
    };

    // 显示用户信息
    const showUserInfo = () => {
      let roleText = '普通用户';
      if (currentUser.value.role === 'ADMIN') {
        roleText = '管理员';
      }

      ElMessageBox.alert(
          `您好${roleText}\n您的用户名是: ${currentUser.value.username}`,
          '个人信息',
          {
            confirmButtonText: '确定',
          }
      );
    };

    onMounted(() => {
      getCurrentUser();
    });

    return {
      currentUser,
      logout,
      showUserInfo,
      getUserRoleDisplay,
      // 修改密码相关
      passwordDialogVisible,
      passwordForm,
      passwordFormRules,
      showUpdatePasswordDialog,
      updatePassword,
      // 表单引用
      passwordFormRef
    };
  }
};
</script>